<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.导入模板引擎 -->
    <!-- 在window全局，多一个函数，叫做templa('模板的ID，需要渲染的数据对象') -->
    <script src="./lib/template-web.js"></script>
    <script src="./jquery-3.6.min.js"></script>
</head>

<body>

    <div id="container"></div>
    <!-- 2.定义模板 -->
    <!-- 模板的html结构，必须定义在script中 -->
    <script type="text/html" id="tpl-user">
        <h1>{{name}} ----- {{age}} </h1>
        {{@ test}}

        <div>
            {{if flag === 0}}
            flag的值是0
            {{else if flag === 1}}
            flag是1
            {{/if}}
        </div>
        <ul>
            {{each hobby}}
            <li>索引:{{$index}},循环项是：{{$value}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        //3.定义数据
        var data = { name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉'] };
        //4.调用templa函数
        var htmls = template('tpl-user', data);
        console.log(htmls);
        //5.渲染html结构
        $('#container').html(htmls);
    </script>
</body>

</html>